<!DOCTYPE html>

<head>
    <title>jsonp</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
    <div id="mydiv">content
        <ul>
            <li>test1</li>
            <li>
                <a id="mod" href="https://github.com">test2</a>
            </li>
            <li>
                <img src="http://oiogxl80p.bkt.clouddn.com/static/user/9833/jpg/1509677462464.jpg">test3</li>
        </ul>
        <span>
            <a href="http://www.zoux.xin">test span</a>
        </span>
        <a href="https://www.json.cn">test a</a>
    </div>
    <input type="button" onclick="test()" value="dom" />
    <input type="button" onclick="test2()" value="domm" />
    <input type="button" onclick="mod()" value="修改dom值" />
</body>
<script>
    // function domc() {
    //     docm = document.getElementById("mydiv").childNodes;
    //     com.rmChildNode(docm, "mydiv");    // 删除无用dom
    //     com.replaceUrl(docm);
    // };
    //动态创建script标签，并请求
    // function addScriptTag(src) {
    //     var script = document.createElement('script');
    //     script.setAttribute('type', 'text/javascript');
    //     script.src = src;
    //     document.body.appendChild(script);
    // };
    //在onload后，跨域请求
    // window.onload = function () {
    //     addScriptTag('http://127.0.0.1:8082/jsonp?callback=test');
    // };
    //回调函数,必须为全局，不然会报错
    function test(data) {
        // console.log(data.name);

        // 使用js往dom里面查元素
        domA = document.createElement("a");
        domA.setAttribute("href", "http://taobao.com");
        domA.innerHTML = "淘宝";
        document.getElementById("mydiv").appendChild(domA);
        // document.body.appendChild(domA);
        // document.body.appendChild(document.createElement("br")); //琢磨半天
    };
    function mod(){
        document.getElementById("mod").href='myvalue';
        alert("ok");
    };
    function test2(data) {
        div = document.createElement("div");
        div.setAttribute("id", "div2");
        a1 = document.createElement("a");
        a1.setAttribute("href", "https://jd.com");
        a2 = document.createElement("a");
        a2.setAttribute("href", "http://www.json.com");
        div.appendChild(a1);
        div.appendChild(a2);
        sp = document.createElement("span");
        sp.appendChild(a1);
        sp.appendChild(a2);
        div.appendChild(sp);
        document.getElementById("mydiv").appendChild(div);
    };

    // bind body event DOMNodeInserted DOMSubtreeModified
    document.addEventListener('DOMNodeInserted', function (e) {
        // innerHTML read content
        console.log("插入的节点:", e.target, e.target.tagName);
        com.begin(e.target);
    });
    document.addEventListener('DOMCharacterDataModified', function (e) {
        // innerHTML read content
        console.log("修改的节点:", e.target, e.target.tagName);
    });
    
    var com = new Object();
    com.getFilterList = function () {
        // return lower token
        return [
            { "a": "href" },
            // { "img": "src" },
            // { "form": "action" },
            // { "img": "data-src" },
            // { "area": "href" },
            // { "iframe": "src" },
            // { "script": "src" }  // 死循环原因 1.script 脚本 2.一个父元素下有变动，使得每次所有的子元素都发生了变化
        ];
        com.begin = function (x) {
            // 1.先替换自己
            this.replaceUrl(x);
            // 2.判断是否有孩子,有我就继续处理
            var childs ;
            try{
                childs = x.childNodes;
            }catch(err){
                return;
            }
            // console.log("长度:", childs.length);
            if (childs.length == 0) {
                return;
            } else {
                for (var i = 0, len = childs.length; i < len; i++) {
                    // console.log("长度里面:", i, childs[i]);
                    if (childs[i].childNodes.length == 0) {
                        com.replaceUrl(childs[i]);
                    } else {
                        com.begin(childs[i]);
                    }
                }
            }
        };
        com.replaceUrl = function (childNode) {
            myList = this.getFilterList();
            var name;
            try {
                name = childNode.tagName;
            } catch (err) {
                return;
            }

            for (i = 0; i < myList.length; i++) {
                ele = myList[i];
                for (k in ele) {
                    if (this.toLower(name) == k) {
                        oldVal = childNode.getAttribute(ele[k]);
                        childNode.setAttribute(ele[k], this.fuck(oldVal, '127.0.0.1:8080/test/xxxx/', '127.0.0.1:9090/test/xxxx/'));
                    }
                }
            }
        };
        com.toLower = function (str) {
            if (!str){
                return ;
            }
            return str.toLowerCase();
        };
        com.fuck = function (url, fuckUrl, fuckUrl2) {
            if (!url || url.length < 4) {
                return url;
            }
            f4 = url.substring(0, 4);
            f1 = url.substring(0, 1);
            f2 = url.substring(0, 2);
            fn2 = url.substring(1, 2);
            console.log("In ----> :", url);
            if ((f4 == "http") || (f2 == "ws")) {
                strs = url.split('//');
                strLen = strs.length;
                if (strLen > 1) {
                    retStr = strs[0].concat('//')
                    if (strs[0] == "https:") {
                        retStr = retStr.concat(fuckUrl2);
                    } else {
                        retStr = retStr.concat(fuckUrl);
                    }
                    for (i = 1; i < strLen; i++) {
                        retStr = retStr.concat(strs[i]);
                    }
                }
                console.log("Out <---- :", retStr);
                return retStr;
            } else if ((f1 == '/') && (fn2 != '/')) {
                return '/'.concat(fuckUrl).concat('/').concat(url.substring(1));
            } else if (f2 == '//') {
                return '//'.concat(fuckUrl).concat('/').concat(url.substring(2));
            } else {
                return url;
            }
        };
        (function (open) {
            XMLHttpRequest.prototype.open = function (method, url, async, user, pass) {

                this.addEventListener("readystatechange", function () {
                    if (this.readyState == 1) {
                        console.log(this.readyState, "拦截到的请求链接:", url); // this one I changed
                        url = com.fuck(url, '127.0.0.1:8080/test/xxxx/', '127.0.0.1:9090/test/xxxx/');
                    } else if (this.readyState == 4) {
                        console.log(this.readyState, "实际的请求链接:", url); // this one I changed
                    }
                }, false);
                open.call(this, method, url, async, user, pass);
            };
        })(XMLHttpRequest.prototype.open);}
</script>

</html>